
/*
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography >  general layout + grid > page layout > components
1em = 16px
*/
@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media only screen and (max-width: 768px) { @content };
  }
  @if $breakpoint == tab-port {
    @media only screen and (max-width: 992px) { @content };
  }
  @if $breakpoint == tab-land {
    @media only screen and (max-width: 1200px) { @content };
  }
  @if $breakpoint == tab-normal {
    @media only screen and (max-width: 1920px) { @content };
  }
  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 1920px) { @content };
  }
}

